<script setup>
import {ref} from "vue";

defineProps({show: {type: Boolean, required: true}})
const emit = defineEmits(['onSubmit', 'onClose'])
const message = ref({
  name: '',
  email: '',
  phone: '',
  info: ''
})
const state = ref({
  canSend: false,
})

const handleInput = (e) => {
  state.value.canSend = message.value.name !== '' || message.value.email !== ''
      || message.value.phone !== '' || message.value.info !== ''
}

const onSend = () => {
  if (state.value.canSend) {
    emit('onSubmit', message.value);
  }
}
</script>

<template>
  <view class="column message" v-if="show">
    <view class="column close" @click="emit('onClose')">
      <img src="../assets/icons/icon_close.png" alt=""/>
    </view>
    <view class="column" style="margin: 0 36px 36px 36px;">
      <view class="label">名字/Name</view>
      <input class="input" type="text" placeholder="Name" v-model="message.name" @input="handleInput"/>
      <view class="label">邮箱/Email</view>
      <input class="input" type="email" placeholder="Email" v-model="message.email" @input="handleInput"/>
      <view class="label">手机/Phone number</view>
      <input class="input" type="phone" placeholder="Phone number" v-model="message.phone" @input="handleInput"/>
      <view class="label">信息/Message</view>
      <textarea class="input textarea" placeholder="您的需求/建议/想咨询的项目" v-model="message.info"
                @input="handleInput"/>
    </view>
    <view class="column bottom">
      <view class="column button" :class="{disable: !state.canSend}" @click="onSend">
        <span>发送信息</span>
      </view>
    </view>
  </view>
</template>

<style scoped>
.message {
  position: fixed;
  bottom: 10%;
  right: 10em;
  width: 25em;
  background-color: #191919;
  border-radius: 1.33em;
  z-index: 99;

  .close {
    align-items: flex-end;
    margin-top: 36px;
    margin-right: 36px;
    cursor: pointer;
  }

  .label {
    margin: 10px 0;
    color: #AFAFAF;
  }

  .input {
    background: #0A0A0A;
    border-radius: 8px;
    color: #00c6f7;
    resize: vertical;
    box-shadow: none;
    height: 4em;
    padding: 16px;
    border: none;

    &:active {
      border: none;
    }
  }

  .textarea {
    height: 12em;
    max-height: 12em;
  }

  .bottom {
    height: 100px;
    background-color: #0F0F0F;
    border-radius: 0 0 1.33em 1.33em;

    .button {
      background-color: #00c6f7;
      color: #171C61;
      font-weight: 500;
      border-radius: 16px;
      height: 60%;
      width: 90%;
      margin: auto;
      justify-content: center;
      text-align: center;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      cursor: pointer;

      &.disable {
        background-color: #454545;
        color: #AFAFAF;
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .message {
    width: 91%;
    left: 1em;
    right: 1em;
    height: 35em;
    bottom: 10em;
  }
}
</style>